<template>
  <div class='header'>
    <div @click="back">
      <el-icon>
        <Back/>
      </el-icon>
    </div>
    <div>行程详情</div>
    <div class="hide">
      <el-icon>
        <Bell/>
      </el-icon>
    </div>
  </div>
  <el-card class="box-card">
    <div class="route">
      <span style="margin-right:30px ;">行程路线</span>
      <span>{{ store.skipData.route }}</span>
    </div>
    <div class="time">
      <span style="margin-right:30px ;">出发时间</span>
      <span style="margin-right: 10px;">{{
          store.skipData.start_date
        }}</span>
      <span>{{ store.skipData.start_time }}</span>
    </div>
    <div class="num">
      <div>
        <span style="color: red;">{{ store.skipData.num_passengers }}人</span>
        <span style="margin: 0px 5px;">/</span>
        <span>{{ store.skipData.max_seat_capacity }}座</span>
      </div>
      <div>
        <span style="color: red;">{{ store.skipData.price }}元</span>
        <span style="margin: 0px 5px;">/</span>
        <span>位</span>
      </div>
    </div>
    <div class="nav">
      <div>行程路线导航</div>
      <div class="map">
        <Map></Map>
      </div>
      <div style="text-align: center; margin-top: 30px;">
        <el-button plain style="width: 120px;" @click="updateStatus">行程完成</el-button>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import {onMounted} from 'vue'
import Map from '../components/Map.vue';
import {useCounterStore} from '@/stores/counter'
import router from '../router';
import request from "@/utils/request";

const store = useCounterStore();  // 使用 Vuex Store
import {ElLoading} from 'element-plus'


const FullScreen = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '定位中',
  })
  setTimeout(() => {
    loading.close()
  }, 2000)
}

//回退路由
const back = () => {
  router.back(1);
}

//行程完成将行程中的状态改为已完成
const updateStatus = () => {
  request.put(`/vehicle-trip/vehicleTrip/updateStatus/${store.skipData.id}/已完成`).then(result => {
        console.log(result);
        if (result.success == true) {
          ElMessage({
            message: '订单已完成',
            type: 'success',
          })

          router.push("/search")
        }
      }
  )
}

onMounted(() => {
  FullScreen();
})
</script>
<style lang='less' scoped>
.header {
  display: flex;
  justify-content: space-between;
  background-color: #BDDCFF;
  height: 60px;
  line-height: 60px;
  color: #495e77;
  padding: 0px 12px;
}

.hide {
  opacity: 0;
}

.box-card {
  margin: 20px 10px;

  .time {
    margin: 15px 0;
  }

  .num {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
  }

  .nav {
    .map {
      margin: 10px auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
